<template>
  <div class="detail">
    <!-- <h1>查看任务</h1> -->
    <div class="descriptions">
      <table>
        <tr>
          <td><span class="label">任务年份：</span><span>{{detilList.preAssessTaskEntity.taskYear}}</span></td>
          <td><span class="label">任务编码：</span><span>{{detilList.preAssessTaskEntity.taskNum}}</span></td>
        </tr>
        <tr>
          <td><span class="label">任务名称：</span><span>{{detilList.preAssessTaskEntity.taskName}}</span></td>
          <td><span class="label">面积（平方公里）：</span><span>{{detilList.preAssessTaskEntity.taskArea}}</span></td>
        </tr>
        <tr v-if="detilList.memberlist != ''">
          <td><span class="label">承担小组：</span><span>{{detilList.preAssessTaskEntity.groupName}}</span></td>
          <td><span class="label">小组组长：</span><span>{{detilList.preAssessTaskEntity.groupLeader}}</span></td>
        </tr>
        <tr v-if="detilList.memberlist != ''">
          <td><span class="label">小组成员：</span><span>{{getGroupName(detilList.memberlist)}}</span></td>
          <td><span class="label">专家成员：</span><span>{{getGroupName(detilList.expertlist)}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">任务区域：</span><span class="init-taskDivSpan" v-if="detilList.preAssessTaskEntity.taskRegion!=undefined">{{detilList.preAssessTaskEntity.taskRegion.substr(0,358)}}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">任务地区：</span><span class="init-taskDivSpan">{{detilList.preAssessTaskEntity.taskDistrict}}</span></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
import { getGroupName } from "@/utils/group.js";
const props = defineProps({
  detilList: {
    default: {},
    type: Object,
  },
});

const { detilList } = toRefs(props);
console.log(detilList);
</script>

<style lang="scss" scoped>
.detail{
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  h1{
      text-align: center;
      font-weight: 700;
      font-size: 24px;
      color: rgb(16,124,229);
  }
  .descriptions{
    td{
      width: 400px;
      vertical-align: top;
      span:last-child{
        display: inline-block;
        width: 60%;
        vertical-align: top;
      }
    }
    .label{
        text-align: right;
        display: inline-block;
        color: #606266;
        font-weight: 700;
        height: 32px;
        width: 140px;
        padding-right: 14px;
    }
  }
}
</style>